<template>
  <div class="padding-all">
    <div>
      <el-card style="padding: 10px; width: 100%">
        <el-row>
          <el-col :span="6">
            <span class="font"> 仓库编号</span>
            <el-input
              v-model.trim="listPage.like_code"
              style="width: 80%"
              placeholder="请输入内容"
              clearable
            />
          </el-col>
          <el-col :span="6">
            <span class="font"> 仓库名称</span>
            <el-input
              v-model.trim="listPage.like_name"
              style="width: 80%; background-color: #f8f5f5"
              placeholder="请输入内容"
              clearable
            />
          </el-col>
          <el-col :span="6">
            <span class="font"> 仓库状态</span>
            <el-select
              v-model="listPage.status"
              placeholder="请选择"
              style="width: 80%"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col
            :span="6"
            class="btn"
            style="padding-right: 20px; height: 100%; margin-top: 18px"
          >
            <div style="float: right">
              <el-button type="primary" round @click="serchPage">
                搜索
              </el-button>
              <el-button round style="margin-left: 20px" @click="resetPage"> 重置 </el-button>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <div style="margin-top:30px">
      <el-card>
        <el-button
          round
          class="addBtn"
          @click="$router.push({
            name: 'details',
            params: {
              id:'null'
            }
          })"
        >新增仓库</el-button>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="68" align="center" />
          <el-table-column prop="code" label="仓库编码" width="149" align="center" />
          <el-table-column prop="name" label="仓库名称" width="149" align="center" />
          <el-table-column prop="type" label="仓库类型" width="149" align="center">
            <template #default="{row}">
              <div>
                {{ warehouseType[row.type] || '未知' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="location" label="省/市/区" width="299" align="center" />
          <el-table-column prop="address" label="详细地址" width="149" align="center" />
          <el-table-column prop="status" label="仓库状态" width="149" align="center">
            <template #default="{row}">
              <div>
                {{ row.status===1?'启用':'停用' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="surface" label="仓库面积㎡" width="149" align="center" />
          <el-table-column prop="includedNum" label="库区数量" width="149" align="center" />
          <el-table-column prop="personName" label="负责人" width="149" align="center" />
          <el-table-column prop="phone" label="联系电话" width="149" align="center" />
          <el-table-column prop="createTime" label="更新时间" width="149" align="center" />
          <el-table-column fixed="right" label="操作" width="179" align="center">
            <template #default="{row}">
              <el-button
                type="text"
                size="small"
                @click="handleClick(row)"
              >编辑</el-button>
              <el-button type="text" size="small" @click="changeStatusFn(row)">{{ row.status===1 ? '停用': '启用' }}</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="middle-page" style="height: 84px;">
          <el-pagination
            :current-page="listPage.current"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="listPage.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+Obj.total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </el-card>
    </div>
    <!-- 切换 状态 弹窗 -->
    <el-dialog
      :title="`确定${title}`"
      :visible="statusShow"
      width="30%"
      @abort="CloseFn"
    >

      <span>确定要{{ title }}:{{ rowItem.name }}吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="CloseFn">取 消</el-button>
        <el-button round type="primary" @click="submitStatus">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { warehousePage, putWarehouse } from '@/api'
export default {
  data() {
    return {
      rowItem: {}, // 当前选中项
      statusShow: false, // 切换状态弹出层
      warehouseType: { // 仓库类型
        ZZ: '中转仓',
        JG: '加工仓',
        CB: '储备仓',
        LC: '冷藏仓'
      },
      Obj: {},
      listPage: {
        like_code: '', // 仓库编号
        like_name: '', // 创库名称
        status: null, // 状态
        size: 10,
        current: 1,
        descs: 'createTime'
      },

      options: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 0,
          label: '停用'
        },
        {
          value: 1,
          label: '启用'
        }
      ],
      tableData: [] // 列表
    }
  },
  computed: {
    title() {
      return this.rowItem.status === 1 ? '停用' : '启用'
    }

  },
  async created() {
    this.fetchList()
  },
  methods: {
    // 确定切换状态
    async submitStatus() {
      if (this.rowItem.status === 1) {
        await putWarehouse({ id: this.rowItem.id, status: 0 })
      } else {
        await putWarehouse({ id: this.rowItem.id, status: 1 })
      }
      this.$message.success('修改成功')
      this.statusShow = false
      this.fetchList()
    },
    CloseFn() { // 关闭弹窗 close
      this.statusShow = false
    },
    changeStatusFn(row) { // 切换状态点击
      this.statusShow = true
      this.rowItem = row
      console.log(row)
    },
    // 新增仓库 路由跳转
    addRouter(id = '') {
      this.$router.push({
        name: 'details',
        params: {
          id
        }
      })
    },
    resetPage() { // 重置搜索
      this.listPage.like_code = ''
      this.listPage.like_name = ''
      this.listPage.status = null
    },
    serchPage() {
      // 搜索
      this.fetchList()
    },
    handleCurrentChange(val) { // 分页器 当前页
      // console.log(val)
      this.listPage.current = val
      this.fetchList()
    },
    handleSizeChange(val) { // 当前页的 条数
      this.listPage.size = val
      this.fetchList()
    },
    async fetchList() {
      const res = await warehousePage(this.listPage)
      console.log(res)
      this.tableData = res.data.records
      this.Obj = res.data
    },
    handleClick(row) {
      console.log(row)
      this.addRouter(row.id)
      this.$store.commit('user/SET_ADDITEM', row)// 存到了 vuex中
    }
  }

}

</script>

<style lang='scss' scoped>
.padding-all {
  padding: 20px 30px 30px 30px;

  .title_felx {
    display: flex;
    align-items: center;
  }
  .font {
    display: block;
    margin-bottom: 8px;
    color: #887e7e;
    font-size: 12px;
  }
}
::v-deep .el-input__inner {
  background-color: #f8f5f5;
}
.middle-page{
  display: flex;
  justify-content: center;
  align-items: center;
}
.addBtn{
  width: 108px;
  height: 40px;
  background-color: #00be76;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  margin:0px 0 20px 10px;
}
</style>
